<template>
  <div class="system-management">
    <!-- 系统概览统计 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="24" :sm="12" :md="6">
        <div class="stat-card users">
          <div class="stat-icon">
            <el-icon size="28" color="#409EFF"><User /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ userCount }}</div>
            <div class="stat-label">用户总数</div>
          </div>
        </div>
      </el-col>
      
      <el-col :span="24" :sm="12" :md="6">
        <div class="stat-card active-users">
          <div class="stat-icon">
            <el-icon size="28" color="#67C23A"><UserFilled /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ activeUserCount }}</div>
            <div class="stat-label">活跃用户</div>
          </div>
        </div>
      </el-col>
      
      <el-col :span="24" :sm="12" :md="6">
        <div class="stat-card logs">
          <div class="stat-icon">
            <el-icon size="28" color="#E6A23C"><Document /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ logCount }}</div>
            <div class="stat-label">日志总数</div>
          </div>
        </div>
      </el-col>
      
      <el-col :span="24" :sm="12" :md="6">
        <div class="stat-card system-status">
          <div class="stat-icon">
            <el-icon size="28" color="#67C23A"><CircleCheck /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">正常</div>
            <div class="stat-label">系统状态</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 主要内容区域 -->
    <el-card class="main-card">
      <el-tabs v-model="activeTab" class="system-tabs">
        <!-- 用户管理 -->
        <el-tab-pane name="user">
          <template #label>
            <div class="tab-label">
              <el-icon><User /></el-icon>
              <span>用户管理</span>
            </div>
          </template>
          
          <div class="tab-content">
            <div class="content-header">
              <div class="header-left">
                <h3 class="section-title">
                  <el-icon size="20" color="#409EFF"><User /></el-icon>
                  用户管理
                </h3>
                <p class="section-subtitle">管理系统用户账户和权限</p>
              </div>
              <div class="header-right">
                <el-button type="primary" @click="handleAddUser" class="add-button">
                  <el-icon><Plus /></el-icon>
                  <span class="button-text">新增用户</span>
                </el-button>
              </div>
            </div>
            
            <!-- 搜索区域 -->
            <div class="search-section">
              <el-form :model="userSearchForm" :inline="true" class="search-form">
                <el-row :gutter="20">
                  <el-col :span="24" :md="8">
                    <el-form-item label="用户名" class="form-item">
                      <el-input 
                        v-model="userSearchForm.username" 
                        placeholder="请输入用户名" 
                        clearable 
                        class="search-input"
                      >
                        <template #prefix>
                          <el-icon><Search /></el-icon>
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" :md="8">
                    <el-form-item label="状态" class="form-item">
                      <el-select v-model="userSearchForm.status" placeholder="请选择状态" clearable class="search-select">
                        <el-option label="正常" value="1" />
                        <el-option label="停用" value="0" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" :md="8">
                    <div class="search-buttons">
                      <el-button type="primary" @click="handleUserSearch" class="search-btn">
                        <el-icon><Search /></el-icon>
                        <span class="button-text">查询</span>
                      </el-button>
                      <el-button @click="handleUserReset" class="reset-btn">
                        <el-icon><Refresh /></el-icon>
                        <span class="button-text">重置</span>
                      </el-button>
                    </div>
                  </el-col>
                </el-row>
              </el-form>
            </div>

            <!-- 用户表格 -->
            <div class="table-section">
              <el-table :data="userTableData" style="width: 100%" v-loading="userLoading" class="system-table">
                <el-table-column prop="id" label="用户ID" :width="getColumnWidth('id')">
                  <template #default="scope">
                    <div class="user-id">
                      <el-icon><User /></el-icon>
                      <span>{{ scope.row.id }}</span>
                    </div>
                  </template>
                </el-table-column>
                
                <el-table-column prop="username" label="用户名" :width="getColumnWidth('username')">
                  <template #default="scope">
                    <div class="user-info">
                      <div class="username">{{ scope.row.username }}</div>
                      <div class="nickname">{{ scope.row.nickname }}</div>
                    </div>
                  </template>
                </el-table-column>
                
                <el-table-column prop="email" label="邮箱" :width="getColumnWidth('email')">
                  <template #default="scope">
                    <div class="contact-info">
                      <el-icon><Message /></el-icon>
                      <span>{{ scope.row.email }}</span>
                    </div>
                  </template>
                </el-table-column>
                
                <el-table-column prop="phone" label="手机号" :width="getColumnWidth('phone')">
                  <template #default="scope">
                    <div class="contact-info">
                      <el-icon><Phone /></el-icon>
                      <span>{{ scope.row.phone }}</span>
                    </div>
                  </template>
                </el-table-column>
                
                <el-table-column prop="role" label="角色" :width="getColumnWidth('role')">
                  <template #default="scope">
                    <el-tag :type="getRoleType(scope.row.role)" class="role-tag">
                      {{ scope.row.role }}
                    </el-tag>
                  </template>
                </el-table-column>
                
                <el-table-column prop="status" label="状态" :width="getColumnWidth('status')">
                  <template #default="scope">
                    <div class="status-container">
                      <el-tag :type="scope.row.status === '1' ? 'success' : 'danger'" class="status-tag">
                        <el-icon class="status-icon">
                          <component :is="scope.row.status === '1' ? 'CircleCheck' : 'CircleClose'" />
                        </el-icon>
                        {{ scope.row.status === '1' ? '正常' : '停用' }}
                      </el-tag>
                      <div class="status-indicator" :class="scope.row.status === '1' ? 'active' : 'inactive'"></div>
                    </div>
                  </template>
                </el-table-column>
                
                <el-table-column prop="createTime" label="创建时间" :width="getColumnWidth('createTime')">
                  <template #default="scope">
                    <div class="time-info">
                      <el-icon><Clock /></el-icon>
                      <span>{{ scope.row.createTime }}</span>
                    </div>
                  </template>
                </el-table-column>
                
                <el-table-column label="操作" :width="getColumnWidth('actions')" fixed="right">
                  <template #default="scope">
                    <div class="action-buttons">
                      <el-button-group class="action-group">
                        <el-tooltip content="查看详情" placement="top">
                          <el-button size="small" @click="handleViewUser(scope.row)" class="action-btn view-btn">
                            <el-icon><View /></el-icon>
                            <span class="btn-text">查看</span>
                          </el-button>
                        </el-tooltip>
                        
                        <el-tooltip content="编辑用户" placement="top">
                          <el-button size="small" @click="handleEditUser(scope.row)" class="action-btn edit-btn">
                            <el-icon><Edit /></el-icon>
                            <span class="btn-text">编辑</span>
                          </el-button>
                        </el-tooltip>
                        
                        <el-tooltip content="删除用户" placement="top">
                          <el-button size="small" @click="handleDeleteUser(scope.row)" class="action-btn delete-btn">
                            <el-icon><Delete /></el-icon>
                            <span class="btn-text">删除</span>
                          </el-button>
                        </el-tooltip>
                      </el-button-group>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-tab-pane>

        <!-- 日志管理 -->
        <el-tab-pane name="log">
          <template #label>
            <div class="tab-label">
              <el-icon><Document /></el-icon>
              <span>日志管理</span>
            </div>
          </template>
          
          <div class="tab-content">
            <div class="content-header">
              <div class="header-left">
                <h3 class="section-title">
                  <el-icon size="20" color="#E6A23C"><Document /></el-icon>
                  系统日志
                </h3>
                <p class="section-subtitle">查看和管理系统操作日志</p>
              </div>
              <div class="header-right">
                <el-button @click="handleExportLog" class="export-button">
                  <el-icon><Download /></el-icon>
                  <span class="button-text">导出日志</span>
                </el-button>
                <el-button type="danger" @click="handleClearLog" class="clear-button">
                  <el-icon><Delete /></el-icon>
                  <span class="button-text">清空日志</span>
                </el-button>
              </div>
            </div>
            
            <!-- 日志搜索 -->
            <div class="search-section">
              <el-form :model="logSearchForm" :inline="true" class="search-form">
                <el-row :gutter="20">
                  <el-col :span="24" :md="6">
                    <el-form-item label="操作人员" class="form-item">
                      <el-input 
                        v-model="logSearchForm.operator" 
                        placeholder="请输入操作人员" 
                        clearable 
                        class="search-input"
                      >
                        <template #prefix>
                          <el-icon><User /></el-icon>
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" :md="6">
                    <el-form-item label="操作类型" class="form-item">
                      <el-select v-model="logSearchForm.operation" placeholder="请选择操作类型" clearable class="search-select">
                        <el-option label="登录" value="login" />
                        <el-option label="新增" value="add" />
                        <el-option label="修改" value="edit" />
                        <el-option label="删除" value="delete" />
                        <el-option label="查询" value="query" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" :md="12">
                    <el-form-item label="时间范围" class="form-item">
                      <el-date-picker
                        v-model="logSearchForm.dateRange"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        size="default"
                        class="date-picker"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <div class="search-buttons">
                  <el-button type="primary" @click="handleLogSearch" class="search-btn">
                    <el-icon><Search /></el-icon>
                    <span class="button-text">查询</span>
                  </el-button>
                  <el-button @click="handleLogReset" class="reset-btn">
                    <el-icon><Refresh /></el-icon>
                    <span class="button-text">重置</span>
                  </el-button>
                </div>
              </el-form>
            </div>

            <!-- 日志表格 -->
            <div class="table-section">
              <el-table :data="logTableData" style="width: 100%" v-loading="logLoading" class="system-table">
                <el-table-column prop="id" label="日志ID" :width="getColumnWidth('logId')">
                  <template #default="scope">
                    <div class="log-id">
                      <el-icon><Document /></el-icon>
                      <span>{{ scope.row.id }}</span>
                    </div>
                  </template>
                </el-table-column>
                
                <el-table-column prop="operator" label="操作人员" :width="getColumnWidth('operator')">
                  <template #default="scope">
                    <div class="operator-info">
                      <el-icon><User /></el-icon>
                      <span>{{ scope.row.operator }}</span>
                    </div>
                  </template>
                </el-table-column>
                
                <el-table-column prop="operation" label="操作类型" :width="getColumnWidth('operation')">
                  <template #default="scope">
                    <el-tag :type="getOperationType(scope.row.operation)" class="operation-tag">
                      {{ getOperationText(scope.row.operation) }}
                    </el-tag>
                  </template>
                </el-table-column>
                
                <el-table-column prop="description" label="操作描述" :width="getColumnWidth('description')">
                  <template #default="scope">
                    <div class="description-text">{{ scope.row.description }}</div>
                  </template>
                </el-table-column>
                
                <el-table-column prop="ip" label="IP地址" :width="getColumnWidth('ip')">
                  <template #default="scope">
                    <div class="ip-info">
                      <el-icon><Location /></el-icon>
                      <span>{{ scope.row.ip }}</span>
                    </div>
                  </template>
                </el-table-column>
                
                <el-table-column prop="result" label="操作结果" :width="getColumnWidth('result')">
                  <template #default="scope">
                    <div class="result-container">
                      <el-tag :type="scope.row.result === '成功' ? 'success' : 'danger'" class="result-tag">
                        <el-icon class="result-icon">
                          <component :is="scope.row.result === '成功' ? 'CircleCheck' : 'CircleClose'" />
                        </el-icon>
                        {{ scope.row.result }}
                      </el-tag>
                    </div>
                  </template>
                </el-table-column>
                
                <el-table-column prop="createTime" label="操作时间" :width="getColumnWidth('logCreateTime')">
                  <template #default="scope">
                    <div class="time-info">
                      <el-icon><Clock /></el-icon>
                      <span>{{ scope.row.createTime }}</span>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-tab-pane>

        <!-- 系统配置 -->
        <el-tab-pane name="config">
          <template #label>
            <div class="tab-label">
              <el-icon><Setting /></el-icon>
              <span>系统配置</span>
            </div>
          </template>
          
          <div class="tab-content">
            <div class="content-header">
              <div class="header-left">
                <h3 class="section-title">
                  <el-icon size="20" color="#67C23A"><Setting /></el-icon>
                  系统配置
                </h3>
                <p class="section-subtitle">配置系统参数和设置</p>
              </div>
              <div class="header-right">
                <el-button type="primary" @click="handleSaveConfig" class="save-button">
                  <el-icon><Check /></el-icon>
                  <span class="button-text">保存配置</span>
                </el-button>
              </div>
            </div>
            
            <div class="config-section">
              <el-form :model="configForm" label-width="120px" class="config-form">
                <el-row :gutter="24">
                  <el-col :span="24" :md="12">
                    <el-form-item label="系统名称">
                      <el-input 
                        v-model="configForm.systemName" 
                        placeholder="请输入系统名称" 
                        class="config-input"
                      >
                        <template #prefix>
                          <el-icon><Monitor /></el-icon>
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" :md="12">
                    <el-form-item label="系统版本">
                      <el-input 
                        v-model="configForm.version" 
                        placeholder="请输入系统版本" 
                        class="config-input"
                      >
                        <template #prefix>
                          <el-icon><PriceTag /></el-icon>
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" :md="12">
                    <el-form-item label="采集间隔">
                      <div class="input-with-unit">
                        <el-input-number 
                          v-model="configForm.collectInterval" 
                          :min="1" 
                          :max="3600" 
                          class="config-number"
                        />
                        <span class="unit">秒</span>
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" :md="12">
                    <el-form-item label="保存天数">
                      <div class="input-with-unit">
                        <el-input-number 
                          v-model="configForm.saveDays" 
                          :min="1" 
                          :max="3650" 
                          class="config-number"
                        />
                        <span class="unit">天</span>
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" :md="12">
                    <el-form-item label="告警阈值">
                      <div class="input-with-unit">
                        <el-input-number 
                          v-model="configForm.alarmThreshold" 
                          :min="0" 
                          :max="100" 
                          :precision="2" 
                          class="config-number"
                        />
                        <span class="unit">%</span>
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="系统描述">
                      <el-input 
                        v-model="configForm.description" 
                        type="textarea" 
                        :rows="4" 
                        placeholder="请输入系统描述"
                        class="config-textarea"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Plus, 
  Search, 
  Refresh, 
  Download, 
  Delete, 
  Check,
  User,
  UserFilled,
  Document,
  CircleCheck,
  CircleClose,
  Message,
  Phone,
  Clock,
  View,
  Edit,
  Location,
  Setting,
  Monitor,
  PriceTag
} from '@element-plus/icons-vue'

// 响应式断点
const isMobile = computed(() => {
  if (typeof window !== 'undefined') {
    return window.innerWidth < 768
  }
  return false
})

// 获取列宽
const getColumnWidth = (column) => {
  if (isMobile.value) {
    const mobileWidths = {
      id: 80,
      username: 120,
      email: 140,
      phone: 120,
      role: 80,
      status: 100,
      createTime: 140,
      actions: 180,
      logId: 80,
      operator: 100,
      operation: 100,
      description: 150,
      ip: 100,
      result: 100,
      logCreateTime: 140
    }
    return mobileWidths[column] || 100
  }
  const desktopWidths = {
    id: 100,
    username: 150,
    email: 200,
    phone: 150,
    role: 120,
    status: 120,
    createTime: 180,
    actions: 200,
    logId: 100,
    operator: 120,
    operation: 120,
    description: 300,
    ip: 150,
    result: 120,
    logCreateTime: 180
  }
  return desktopWidths[column] || 150
}

// 当前激活的标签页
const activeTab = ref('user')

// 用户管理相关
const userSearchForm = reactive({
  username: '',
  status: ''
})

const userTableData = ref([
  {
    id: 1,
    username: 'admin',
    nickname: '管理员',
    email: 'admin@waterapp.com',
    phone: '13800138000',
    role: '管理员',
    status: '1',
    createTime: '2024-01-01 10:00:00'
  },
  {
    id: 2,
    username: 'operator',
    nickname: '操作员',
    email: 'operator@waterapp.com',
    phone: '13800138001',
    role: '操作员',
    status: '1',
    createTime: '2024-01-02 10:00:00'
  },
  {
    id: 3,
    username: 'viewer',
    nickname: '查看员',
    email: 'viewer@waterapp.com',
    phone: '13800138002',
    role: '查看员',
    status: '0',
    createTime: '2024-01-03 10:00:00'
  }
])

const userLoading = ref(false)

// 日志管理相关
const logSearchForm = reactive({
  operator: '',
  operation: '',
  dateRange: []
})

const logTableData = ref([
  {
    id: 1,
    operator: 'admin',
    operation: 'login',
    description: '用户登录系统',
    ip: '192.168.1.100',
    result: '成功',
    createTime: '2024-01-15 10:30:00'
  },
  {
    id: 2,
    operator: 'admin',
    operation: 'add',
    description: '新增设备：水质监测仪A',
    ip: '192.168.1.100',
    result: '成功',
    createTime: '2024-01-15 10:25:00'
  },
  {
    id: 3,
    operator: 'operator',
    operation: 'edit',
    description: '修改设备配置',
    ip: '192.168.1.101',
    result: '失败',
    createTime: '2024-01-15 10:20:00'
  }
])

const logLoading = ref(false)

// 系统配置相关
const configForm = reactive({
  systemName: '水云鉴水利质检系统',
  version: 'v1.0.0',
  collectInterval: 60,
  saveDays: 365,
  alarmThreshold: 85.5,
  description: '水云鉴水利质检系统是一个专业的水质监测和管理平台，提供实时数据采集、可视化展示、设备管理等功能。'
})

// 计算统计数据
const userCount = computed(() => {
  return userTableData.value.length
})

const activeUserCount = computed(() => {
  return userTableData.value.filter(user => user.status === '1').length
})

const logCount = computed(() => {
  return logTableData.value.length
})

// 角色类型
const getRoleType = (role) => {
  const roleMap = {
    '管理员': 'danger',
    '操作员': 'warning',
    '查看员': 'info'
  }
  return roleMap[role] || 'info'
}

// 操作类型
const getOperationType = (operation) => {
  const operationMap = {
    'login': 'success',
    'add': 'primary',
    'edit': 'warning',
    'delete': 'danger',
    'query': 'info'
  }
  return operationMap[operation] || 'info'
}

const getOperationText = (operation) => {
  const operationMap = {
    'login': '登录',
    'add': '新增',
    'edit': '修改',
    'delete': '删除',
    'query': '查询'
  }
  return operationMap[operation] || operation
}

// 用户管理方法
const handleUserSearch = () => {
  userLoading.value = true
  setTimeout(() => {
    userLoading.value = false
    ElMessage.success('查询完成')
  }, 1000)
}

const handleUserReset = () => {
  userSearchForm.username = ''
  userSearchForm.status = ''
  handleUserSearch()
}

const handleAddUser = () => {
  ElMessage.info('新增用户功能')
}

const handleViewUser = (row) => {
  ElMessage.info(`查看用户: ${row.username}`)
}

const handleEditUser = (row) => {
  ElMessage.info(`编辑用户: ${row.username}`)
}

const handleDeleteUser = (row) => {
  ElMessageBox.confirm('确定要删除该用户吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('删除成功')
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

// 日志管理方法
const handleLogSearch = () => {
  logLoading.value = true
  setTimeout(() => {
    logLoading.value = false
    ElMessage.success('查询完成')
  }, 1000)
}

const handleLogReset = () => {
  logSearchForm.operator = ''
  logSearchForm.operation = ''
  logSearchForm.dateRange = []
  handleLogSearch()
}

const handleExportLog = () => {
  ElMessage.info('导出日志功能')
}

const handleClearLog = () => {
  ElMessageBox.confirm('确定要清空所有日志吗？', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('日志清空成功')
  }).catch(() => {
    ElMessage.info('已取消清空')
  })
}

// 系统配置方法
const handleSaveConfig = () => {
  ElMessage.success('配置保存成功')
}

onMounted(() => {
  console.log('🎯 系统管理页面加载成功！')
  console.log('当前路由:', window.location.pathname)
  console.log('页面标题:', document.title)
  handleUserSearch()
  handleLogSearch()
})
</script>

<style scoped>
.system-management {
  padding: 0;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: calc(100vh - 120px);
}

/* 统计卡片样式 */
.stats-row {
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #409EFF, #67C23A);
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

.stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(64, 158, 255, 0.1), rgba(64, 158, 255, 0.05));
}

.stat-card.active-users .stat-icon {
  background: linear-gradient(135deg, rgba(103, 194, 58, 0.1), rgba(103, 194, 58, 0.05));
}

.stat-card.logs .stat-icon {
  background: linear-gradient(135deg, rgba(230, 162, 60, 0.1), rgba(230, 162, 60, 0.05));
}

.stat-card.system-status .stat-icon {
  background: linear-gradient(135deg, rgba(103, 194, 58, 0.1), rgba(103, 194, 58, 0.05));
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 28px;
  font-weight: 700;
  color: #2c3e50;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #7f8c8d;
  font-weight: 500;
}

/* 主卡片样式 */
.main-card {
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  background: white;
}

/* 标签页样式 */
.system-tabs {
  background: transparent;
}

.tab-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.tab-content {
  padding: 24px;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f2f5;
}

.header-left {
  flex: 1;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 8px 0;
}

.section-subtitle {
  color: #7f8c8d;
  font-size: 14px;
  margin: 0;
}

.header-right {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* 搜索区域样式 */
.search-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  border: 1px solid #e9ecef;
}

.search-form {
  margin: 0;
}

.form-item {
  width: 100%;
  margin-bottom: 16px;
}

.search-input,
.search-select {
  width: 100%;
}

.search-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.search-btn {
  background: linear-gradient(135deg, #409EFF, #66B1FF);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.search-btn:hover {
  background: linear-gradient(135deg, #337ECC, #5A9FE8);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(64, 158, 255, 0.4);
}

.reset-btn {
  background: linear-gradient(135deg, #909399, #A6A9AD);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.reset-btn:hover {
  background: linear-gradient(135deg, #7A7D82, #909399);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(144, 147, 153, 0.4);
}

/* 按钮样式 */
.add-button,
.save-button {
  background: linear-gradient(135deg, #67C23A, #85CE61);
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.add-button:hover,
.save-button:hover {
  background: linear-gradient(135deg, #5DA934, #73B84D);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(103, 194, 58, 0.4);
}

.export-button {
  background: linear-gradient(135deg, #E6A23C, #F0C78A);
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.export-button:hover {
  background: linear-gradient(135deg, #D4942E, #E8B574);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(230, 162, 60, 0.4);
}

.clear-button {
  background: linear-gradient(135deg, #F56C6C, #F78989);
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.clear-button:hover {
  background: linear-gradient(135deg, #E55A5A, #F67A7A);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(245, 108, 108, 0.4);
}

.button-text {
  margin-left: 6px;
}

/* 表格样式 */
.table-section {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.system-table {
  margin: 0;
}

/* 表格单元格样式 */
.user-id,
.log-id {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.username {
  font-weight: 600;
  color: #2c3e50;
}

.nickname {
  font-size: 12px;
  color: #7f8c8d;
  background: #f8f9fa;
  padding: 2px 8px;
  border-radius: 12px;
  display: inline-block;
  width: fit-content;
}

.contact-info,
.operator-info,
.time-info,
.ip-info {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #606266;
}

.role-tag,
.operation-tag {
  border-radius: 16px;
  padding: 4px 12px;
  font-weight: 500;
}

.status-container,
.result-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-tag,
.result-tag {
  border-radius: 16px;
  padding: 4px 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}

.status-icon,
.result-icon {
  font-size: 12px;
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.status-indicator.active {
  background: #67C23A;
}

.status-indicator.inactive {
  background: #F56C6C;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(103, 194, 58, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(103, 194, 58, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(103, 194, 58, 0);
  }
}

.description-text {
  color: #606266;
  line-height: 1.4;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  justify-content: center;
}

.action-group {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #ebeef5;
}

.action-btn {
  border: none;
  border-radius: 0;
  padding: 8px 12px;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
  font-weight: 500;
  position: relative;
  overflow: hidden;
}

.action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.action-btn:hover::before {
  left: 100%;
}

.view-btn {
  background: linear-gradient(135deg, #409EFF, #66B1FF);
  color: white;
}

.view-btn:hover {
  background: linear-gradient(135deg, #337ECC, #5A9FE8);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(64, 158, 255, 0.4);
}

.edit-btn {
  background: linear-gradient(135deg, #67C23A, #85CE61);
  color: white;
}

.edit-btn:hover {
  background: linear-gradient(135deg, #5DA934, #73B84D);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(103, 194, 58, 0.4);
}

.delete-btn {
  background: linear-gradient(135deg, #F56C6C, #F78989);
  color: white;
}

.delete-btn:hover {
  background: linear-gradient(135deg, #E55A5A, #F67A7A);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(245, 108, 108, 0.4);
}

.btn-text {
  font-size: 13px;
  font-weight: 500;
}

.action-btn:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

/* 配置区域样式 */
.config-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  padding: 24px;
  border: 1px solid #e9ecef;
}

.config-form {
  margin: 0;
}

.config-input,
.config-textarea {
  width: 100%;
}

.input-with-unit {
  display: flex;
  align-items: center;
  gap: 12px;
}

.config-number {
  flex: 1;
}

.unit {
  color: #606266;
  font-weight: 500;
  min-width: 24px;
}

/* Element Plus 深度样式 */
:deep(.el-tabs__header) {
  background: white;
  border-radius: 16px 16px 0 0;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 0;
  padding: 0 24px;
}

:deep(.el-tabs__nav-wrap) {
  padding: 0;
}

:deep(.el-tabs__item) {
  padding: 0 24px;
  font-weight: 500;
  color: #606266;
  height: 60px;
  line-height: 60px;
  transition: all 0.3s ease;
}

:deep(.el-tabs__item.is-active) {
  color: #409eff;
  font-weight: 600;
}

:deep(.el-tabs__active-bar) {
  background: linear-gradient(90deg, #409EFF, #66B1FF);
  height: 3px;
  border-radius: 2px;
}

:deep(.el-tabs__content) {
  padding: 0;
  background: white;
  border-radius: 0 0 16px 16px;
}

:deep(.el-table) {
  border-radius: 0;
  overflow: hidden;
}

:deep(.el-table th) {
  background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
  color: #606266;
  font-weight: 600;
  border-bottom: 2px solid #e9ecef;
}

:deep(.el-table tr:hover td) {
  background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
}

:deep(.el-input__wrapper) {
  border-radius: 8px;
  transition: all 0.3s ease;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #409EFF;
}

:deep(.el-select .el-input__wrapper) {
  border-radius: 8px;
}

:deep(.el-date-editor) {
  border-radius: 8px;
}

:deep(.el-form-item__label) {
  font-weight: 600;
  color: #2c3e50;
}

:deep(.el-textarea__inner) {
  border-radius: 8px;
}

:deep(.el-pagination) {
  justify-content: flex-end;
  flex-wrap: wrap;
  padding: 16px 24px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .stats-row {
    margin-bottom: 16px;
  }
  
  .stat-card {
    padding: 16px;
    margin-bottom: 12px;
  }
  
  .stat-icon {
    width: 48px;
    height: 48px;
  }
  
  .stat-number {
    font-size: 24px;
  }
  
  .tab-content {
    padding: 16px;
  }
  
  .content-header {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
  }
  
  .header-right {
    width: 100%;
    justify-content: center;
  }
  
  .search-section {
    padding: 16px;
    margin-bottom: 16px;
  }
  
  .config-section {
    padding: 16px;
  }
  
  .button-text {
    display: none;
  }
  
  .action-group {
    flex-direction: column;
    width: 100%;
  }
  
  .action-btn {
    width: 100%;
    border-radius: 6px;
    margin: 2px 0;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .action-btn:last-child {
    border-bottom: none;
  }
  
  .btn-text {
    font-size: 12px;
  }
  
  :deep(.el-table) {
    font-size: 12px;
  }
  
  :deep(.el-table th) {
    padding: 8px 0;
  }
  
  :deep(.el-table td) {
    padding: 8px 0;
  }
  
  :deep(.el-form-item__label) {
    font-size: 13px;
  }
  
  :deep(.el-tabs__header) {
    padding: 0 16px;
  }
  
  :deep(.el-tabs__item) {
    padding: 0 16px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .stat-card {
    padding: 12px;
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  
  .stat-icon {
    width: 40px;
    height: 40px;
  }
  
  .stat-number {
    font-size: 20px;
  }
  
  .tab-content {
    padding: 12px;
  }
  
  .search-section {
    padding: 12px;
  }
  
  .config-section {
    padding: 12px;
  }
  
  .input-with-unit {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  
  :deep(.el-table th) {
    padding: 6px 0;
    font-size: 11px;
  }
  
  :deep(.el-table td) {
    padding: 6px 0;
    font-size: 10px;
  }
  
  :deep(.el-tabs__header) {
    padding: 0 12px;
  }
  
  :deep(.el-tabs__item) {
    padding: 0 12px;
    font-size: 13px;
  }
}
</style>
